
// ===========================
//    RESET
// ===========================

html, body {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
body {
  margin: 0;
  background: $body-background-color;
  color:white;
  font-family: $main-font;
  overflow-y:hidden;
}
* {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

// ===========================
//    ICONS FONT
//    by icomoon.io
// ===========================

@font-face {
    font-family: 'icomoon';
    src:url(#{$fontUrl}icomoon.eot);
    src:url(#{$fontUrl}icomoon.eot?#iefix) format('embedded-opentype'),
        url(#{$fontUrl}icomoon.woff) format('woff'),
        url(#{$fontUrl}icomoon.ttf) format('truetype'),
        url(#{$fontUrl}icomoon.svg#icomoon) format('svg');
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    //line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon-menu, .icon-cancel, .icon-info-sign {
    font-family: 'icomoon';
    display: inline-block;
    color: $icon-color;
    speak: none;
    font-size: $icon-size;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    //line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-menu:before {
    display: inline-block;
    content: "\e000";
}
.icon-cancel:before {
    content: "\e001";
}
.icon-info-sign:before {
    content: "\f05a";
}

// ===========================
//    LAYOUT
// ===========================

.page {
    position:relative;
    width:101%;
    height: 100%;
    overflow: hidden;
}

.page > div {
    float:left;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    overflow:hidden;
    .img {
        padding-right: 2px;
        display:block;
        height:100%;
        width:100%;
        top:0;
        left:0;
        position:relative;
        z-index:1;
        background-repeat: no-repeat;
    }
    .caption {
        background:$img-caption-background-color;
        font-size: 1em;
        padding:5px;
        line-height: 1.3em;
        color:$img-caption-color;
        position:absolute;
        width: 100%;
        bottom:0px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        z-index:2;
    }
}
.img.loaded {
    background-size: cover;
    background-position:center;
}
.img.loading {
    background-image:url();
    background-position: center center;
}

.blurred {
    -webkit-filter: blur(10px);
}

// page templates

// generates a 5 items page with one big item somewhere
@mixin fullpage5($bigIndex:1) {
    @for $i from 1 through 5 {
        $width: 33%;
        &:nth-child(#{$i}) {
            @if ($i==$bigIndex) {
                $width: 66%;
            };
            width: $width;
            height: 50%;
        }
    }
}

// 4 simple combinations
.page-5-1 > div {
    @include  fullpage5(1);
}
.page-5-2 > div {
    @include  fullpage5(2);
}
.page-5-3 > div {
    @include  fullpage5(4);
}
.page-5-4 > div {
    @include  fullpage5(5);
}
